<template>
  <div class="login page">
      <div class="form">
        <!-- {{userKey}} -->
        <h3 class="title">请输入你的名字</h3>
        <input class="usernameInput" type="text" maxlength="8" v-model='name' @keyup.enter="login" />
      </div>
    </div>
</template>

<script>
//import { mapGetters } from "vuex";
import api from "@/api/socket";

export default {
  name: "Login",
  data() {
    return {
      name: ""
    };
  },
  // computed: mapGetters({
  //   userKey: "userKey",
  //   userName: "userName"
  // }),
  watch: {
    // userName(val, old) {
    //   console.log(val, old);
    //   //if (val != null) this.$router.replace("WelcomeDraw");
    // }
  },
  methods: {
    login() {
      // alert("登录");
      // api.login(this.name, rst => {
      //   alert("登录成功");
      //   console.log(rst);
      // });
      // return;
      this.$store.dispatch("login", { userName: this.name }).then(rst => {
        if (rst.code) {
          this.$router.replace("WelcomeDraw");
        } else {
          Utils.alert("登录失败");
        }
      });
    }
  }
};
</script>

<style lang="scss"  scoped>
.page {
  height: 100%;
  position: absolute;
  width: 100%;
}

.login.page {
  background-color: #000;

  .form {
    height: 100px;
    margin-top: -100px;
    position: absolute;

    text-align: center;
    top: 50%;
    width: 100%;

    .usernameInput {
      background-color: transparent;
      border: none;
      border-bottom: 2px solid #fff;
      outline: none;
      padding-bottom: 15px;
      text-align: center;
      width: 400px;
    }
  }

  .title {
    font-size: 200%;
  }

  .usernameInput {
    font-size: 200%;
    letter-spacing: 3px;
  }

  .title,
  .usernameInput {
    color: #fff;
    font-weight: 100;
  }
}
</style>
